import Taro, { switchTab, navigateTo } from '@tarojs/taro'
import { View, ScrollView, Button, Block } from '@tarojs/components'
import { AtIcon, AtButton } from 'taro-ui'
import React, { useState, useEffect } from 'react'

import api from '../../utils/api'
import { formatTime } from '../../utils/formatTime'
import { useAsyncEffect } from '../../utils/index'

import './record.less'
import request from '../../utils/request'

function Record() {
  const [pageIndex, setPageIndex] = useState(1)
  const [pageSize, setPageSize] = useState(30)
  const [totalCount, setTotalCount] = useState(0)
  const [isEnd, setIsEnd] = useState(false)
  const [dataList, setDataList] = useState([])
  const getList = () => {
    request(api.moneyRecord, 'GET', {
      page_on: pageIndex,
      page_size: pageSize
    }).then(data => {
      setTotalCount(data.page_info.total)
      setDataList(dataList.concat(data.result))
      setIsEnd(Math.ceil(data.page_info.total / pageSize) <= pageIndex)
    }).catch(res => {
      if (res.code === 150) {
        getList()
      }
    })
  }
  useEffect(() => {
    getList()
  }, [])
  const fetchData = (e) => {
    console.log('fetch')
    if (isEnd) return
    getList()
  }
  
  return (
    <View className='record'>
      <ScrollView onScrollToLower={fetchData} lowerThreshold={100}>
        <View className='cell-group'>
          <View className="cell-item">
            <View className="item money">金额</View>
            <View className="item status">状态</View>
            <View className="item time">导入时间</View>
          </View>
          {dataList.map(item => {
            let time = formatTime((item.time_add))
            return <View className="cell-item" key={item.id}>
              <View className="item money">{item.money_pay}元</View>
              <View className="item status">{item.status_pay}</View>
              <View className="item time">{time}</View>
            </View>
          })}
        </View>
        <View class="nomore">{ isEnd ? '没有更多了': '加载中...' }</View>
      </ScrollView>
    </View>
  )
}

export default Record
